<template>
	<div class="myPage" style="">
		<div v-if="false"
			style="position: absolute;width: 100%;height: 100%;background-color: white;filter:blur(87rpx);z-index: 1;">
			<div
				style="position: absolute;width: 380rpx;height: 380rpx;background-color: lightgreen;border-radius: 50%;right: -8%;top: -14%;">

			</div>
			<div
				style="position: absolute;width: 520rpx;height: 520rpx;background-color: deepskyblue;border-radius: 50%;left:-24%;top: -14%;">

			</div>

		</div>
		<fui-nav-bar fontWeight="bold" style="" background="white" color="#000" title="规则查询" @rightClick="rightClick">

			<div
				style="border: 1px solid #eeeeee;background: white;border-radius: 32rpx;padding: 6rpx;display: flex;flex-direction: row;width: 200rpx;justify-content: space-around;">
				<fui-icon style="margin: 0rpx 8rpx;" size="43" @click="leftClick" color="black"
					name="arrowleft"></fui-icon>
				<div class="link-column" style=""></div>
				<fui-icon style="margin: 0rpx 8rpx;" size="43" @click="gotoHome" color="black" name="home"></fui-icon>
			</div>
			<template v-slot:right>

			</template>
		</fui-nav-bar>
		<div style="margin-left: 32rpx;margin-right: 32rpx;display: flex;margin-top: 40rpx;">
			<div style="background-color: orange;height: 40rpx;width: 12rpx;border-radius: 16rpx;margin-right: 16rpx;">
			</div>
			年级
		</div>
		<div style="display: flex;flex-direction: row;color: white;padding: 0rpx 16rpx;">
			<div @click="changeSelectYear(1)" :class="selectYear==1?'select':'noSelect'"
				style="flex: 1;height: 64rpx;margin: 16rpx;border-radius: 32rpx;display: flex;align-items: center;justify-content: center;">
				七年级
			</div>

			<div @click="changeSelectYear(2)" :class="selectYear==2?'select':'noSelect'"
				style="flex: 1;height: 64rpx;margin: 16rpx;border-radius: 32rpx;display: flex;align-items: center;justify-content: center;">
				八年级
			</div>

			<div @click="changeSelectYear(3)" :class="selectYear==3?'select':'noSelect'"
				style="flex: 1;height: 64rpx;margin: 16rpx;border-radius: 32rpx;display: flex;align-items: center;justify-content: center;">
				九年级
			</div>
		</div>

		<div style="margin-left: 32rpx;margin-right: 32rpx;display: flex;margin-top: 40rpx;">
			<div style="background-color: orange;height: 40rpx;width: 12rpx;border-radius: 16rpx;margin-right: 16rpx;">
			</div>
			科目
		</div>

		<div style="padding: 16rpx 24rpx;">
			<fui-form-item style="border-radius: 16rpx;" @click="show=true" label="科目" asterisk arrow highlight>
				<fui-input :borderBottom="false" :padding="[0]" placeholder="请选择项目" disabled
					v-model="selectSubItem.result" backgroundColor="transparent"></fui-input>
			</fui-form-item>
		</div>

		<fui-picker linkage title="请选择项目" :layer="2" :options="options" :show="show" @change="change"
			@cancel="cancel"></fui-picker>

		<div style="margin-left: 32rpx;margin-right: 32rpx;display: flex;margin-top: 40rpx;">
			<div style="background-color: orange;height: 40rpx;width: 12rpx;border-radius: 16rpx;margin-right: 16rpx;">
			</div>
			成绩换算
			<div style="flex:1"></div>
			<fui-radio-group name="radio" v-model="selectSex" @change="selectSexChange">
				<view style="display:flex">
					<fui-label>
						<view class="fui-align__center">
							<fui-radio value="1" checked></fui-radio>
							<text class="fui-text">男</text>
						</view>
					</fui-label>
					<div style="width:16rpx"></div>
					<fui-label>
						<view class="fui-align__center">
							<fui-radio value="2"></fui-radio>
							<text class="fui-text">女</text>
						</view>
					</fui-label>
				</view>
			</fui-radio-group>
		</div>

		<div style="padding: 16rpx 24rpx;display: flex;flex-direction: row;">
			<fui-input v-model="rawScore" style="border-radius: 16rpx;" borderTop placeholder="请输入原始成绩"></fui-input>
			<view @tap.stop="btnConfirm"
				style="background-color: #ffc529;border-radius: 16rpx;display: flex;align-items: center;justify-content: center;margin:0rpx 16rpx;color: white;width: 120rpx;">
				查询
			</view>
			<fui-input v-model="convResultScore" style="border-radius: 16rpx;" borderTop placeholder="得分"></fui-input>

		</div>

		<div style="flex: 1;overflow-y: scroll;">
			<fui-empty v-if="scoreRuleList==null"
				src="https://res.firstui.cn/static/images/component/empty/img_data_3x.png" title="">
			</fui-empty>
			<div v-else style="display: flex;">
				<div v-if="scoreRuleList.scoreRuleList != null"
					style="padding: 16rpx;display: flex;flex-direction: column;width: 100%;font-size: 36rpx;">
					<div
						style="display: flex;justify-content: space-around;background-color: #eeeeee;border-radius: 8rpx;height: 64rpx;align-items: center;">
						<div>成绩</div>
						<div>得分</div>
					</div>
					<div style="display: flex;flex-direction: row;height: 48rpx;align-items: center;background-color: white;"
						v-for="(item,index) in scoreRuleList.scoreRuleList">
						<div style="flex: 1;text-align: center;">{{item.rawScore}}</div>
						<div style="flex: 1;text-align: center;">{{item.convScore}}</div>
					</div>
				</div>
				<div v-if="scoreRuleList.boyScoreRuleList != null"
					style="padding: 16rpx;display: flex;flex-direction: column;width: 100%;font-size: 36rpx;">
					<div
						style="display: flex;justify-content: space-around;background-color: #eeeeee;border-radius: 8rpx;height: 64rpx;align-items: center;">
						<div>男生</div>
					</div>
					<div
						style="display: flex;justify-content: space-around;background-color: #eeeeee;border-radius: 8rpx;height: 64rpx;align-items: center;">
						<div>成绩</div>
						<div>得分</div>
					</div>
					<div style="display: flex;flex-direction: row;height: 48rpx;align-items: center;background-color: white;"
						v-for="(item,index) in scoreRuleList.boyScoreRuleList">
						<div style="flex: 1;text-align: center;">{{item.rawScore}}</div>
						<div style="flex: 1;text-align: center;">{{item.convScore}}</div>
					</div>
				</div>

				<div v-if="scoreRuleList.girlScoreRuleList != null"
					style="padding: 16rpx;display: flex;flex-direction: column;width: 100%;font-size: 36rpx;">
					<div
						style="display: flex;justify-content: space-around;background-color: #eeeeee;border-radius: 8rpx;height: 64rpx;align-items: center;">
						<div>女生</div>
					</div>
					<div
						style="display: flex;justify-content: space-around;background-color: #eeeeee;border-radius: 8rpx;height: 64rpx;align-items: center;">
						<div>成绩</div>
						<div>得分</div>
					</div>
					<div style="display: flex;flex-direction: row;justify-content: space-around;height: 48rpx;align-items: center;background-color: white;"
						v-for="(item,index) in scoreRuleList.girlScoreRuleList">
						<div style="flex: 1;text-align: center;">{{item.rawScore}}</div>
						<div style="flex: 1;text-align: center;">{{item.convScore}}</div>
					</div>
				</div>


			</div>
		</div>

		<!-- <div style="flex: 1;display: flex;flex-direction: column;justify-content: center;overflow-y: scroll;background-color: #ffc529;">
			
			<div style="" v-if="false">
				<div style="display: flex;flex-direction: row;">
					<div style="flex: 1;overflow-y: scroll;" v-if="scoreRuleList.scoreRuleList != null">
						<scroll-view style="height: 1900rpx;overflow-y: scroll;">
							ss
						</scroll-view>
					</div>
					<div style="flex: 1;" v-if="scoreRuleList.boyScoreRuleList != null">
						男
					</div>
					<div style="flex: 1;" v-if="scoreRuleList.girlScoreRuleList != null">
						女
					</div>
				</div>
			
			</div>
			
		</div> -->
	</div>
	<fui-toast ref="toast"></fui-toast>
</template>

<script>
	import request from "/request/request.js"
	export default {
		data() {
			return {
				selectYear: 1,
				show: false,
				options: [],
				selectSubItem: {},
				scoreRuleList: null,
				selectSex:"1",
				rawScore:"",
				convResultScore:"",
			}
		},
		onLoad() {
			console.log("onLoad");
			this.getSubJect();
		},
		methods: {
			selectSexChange(e){
				console.log(e);
			},
			getSubJect() {
				let that = this;
				request({
					url: `/subject/getSubjectList`,
					method: 'POST',
					data: {
						year: this.selectYear
					}
				}).then((res) => {
					let options = {}
					//提示信息
					options.text = "请求成功";
					this.$refs.toast.show(options);
					that.options = [

					];
					if (res.data == null) {
						that.options = [{
							text: ""
						}, ];
						return;
					}
					for (let i = 0; i < res.data.length; i++) {
						console.log(i);
						let children = [];
						for (let j = 0; j < res.data[i].subItemList.length; j++) {
							let text = res.data[i].subItemList[j].name;
							if (res.data[i].subItemList[j].sextype != 0) {
								text += "(";
								text += res.data[i].subItemList[j].sextype == 1 ? "男" : "女"
								text += ")";
							}
							if (res.data[i].subItemList[j].unit != null) {
								text += "(";
								text += res.data[i].subItemList[j].unit;
								text += ")";
							}
							let obj = {
								text: text,
								value: res.data[i].subItemList[j].id,
							};
							children.push(obj);
						}
						let obj = {
							text: res.data[i].name,
							value: res.data[i].id,
							children: children,
						};
						that.options.push(obj);
					}

				}, (err) => {
					let options = {}
					//提示信息
					options.text = "err";
					this.$refs.toast.show(options)
					console.log('fail' + err);
				});
			},
			change(e) {
				this.show = false
				console.log(e.value[1]);
				this.selectSubItem = e;
				this.getScoreRule(e.value[1]);
			},
			getScoreRule(subItemId) {
				let that = this;
				request({
					url: `/scoreRule/getScoreRuleList?subItemId=` + subItemId,
					method: 'POST'
				}).then((res) => {
					that.scoreRuleList = res.data;
				});
			},
			cancel() {
				this.show = false
			},
			changeSelectYear(selectYear) {
				this.selectYear = selectYear;
				this.getSubJect();
			},
			leftClick() {
				uni.navigateBack();
			},
			gotoHome() {
				getApp().gotoHome();
			},
			btnConfirm(){
				console.log(this.selectSex);
				let that = this;
				request({
					url: "/scoreRule/getScoreByRawScore?sex=" + this.selectSex + "&subItemId=" + this.selectSubItem.value[1] + "&rawScore=" + this.rawScore,
					method: 'POST'
				}).then((res) => {
					if(res.code != 0){
						let options = {}
						//提示信息
						options.text = res.userMsg;
						this.$refs.toast.show(options)
						that.convResultScore = res.userMsg;
						return;
					}
					if(res.data == null){
						let options = {}
						//提示信息
						options.text = "查询失败";
						this.$refs.toast.show(options)
						that.convResultScore = "查询失败";
						return;
					}
					that.convResultScore = res.data.convScore;
					
				});
			}
		}
	}
</script>

<style scoped>
	.fui-list__item {
		width: 100%;
		height: 385rpx;
		position: relative;
		background: #eee;
	}

	.fui-list__title {
		position: absolute;
		left: 0;
		bottom: 0;
		color: #fff;
		font-weight: 500;
		padding: 24rpx 20rpx;
		box-sizing: border-box;
		background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
	}

	.charts-box {
		height: 400rpx;
		width: 400rpx;
	}

	.select {
		background: #ffc529;
		color: white;
	}

	.noSelect {
		background: white;
		color: black;
	}
</style>